<template>
  <div class="device-gateway">
    <ContentTitle :info="ctInfo" />
    <!-- 切换网关 -->
    <el-tabs
      class="bg-fff mt-10"
      v-model="agreement"
      type="card"
      @tab-click="changeTabs"
    >
      <el-tab-pane label="所有设备" name="all"></el-tab-pane>
      <el-tab-pane label="LoRaPP" name="LoRaPP"></el-tab-pane>
      <el-tab-pane label="LoRaWAN" name="LoRaWAN"></el-tab-pane>
    </el-tabs>

    <!-- 搜索条件 -->
    <el-form class="bg-fff pb-10" ref="form" :model="form" label-width="80px">
      <el-form-item label="EUI">
        <el-row>
          <el-col :span="9">
            <el-input
              v-model="form.eui"
              placeholder="请输入EUI关键词"
            ></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="在线状态">
        <el-row>
          <el-col :span="9">
            <el-select v-model="form.online" placeholder="请选择在线状态">
              <el-option label="在线" :value="true"></el-option>
              <el-option label="离线" :value="false"></el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="选择日期">
        <el-date-picker
          v-model="form.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button-group>
          <el-button
            @click="search"
            size="small"
            type="primary"
            icon="el-icon-search"
            >搜索</el-button
          >
          <el-button
            @click="clear"
            size="small"
            type="primary"
            icon="el-icon-delete"
            >清除</el-button
          >
          <el-button
            @click="refresh"
            size="small"
            type="primary"
            icon="el-icon-refresh"
            >刷新</el-button
          >
        </el-button-group>
      </el-form-item>
    </el-form>

    <!-- 列表 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      class="mt-5"
      border
      style="width: 100%"
      stripe
    >
      <el-table-column align="center" prop="id" label="编号"> </el-table-column>
      <el-table-column align="center" prop="eui" label="eui号">
      </el-table-column>
      <el-table-column align="center" prop="name" label="名称">
      </el-table-column>
      <el-table-column align="center" prop="mhz" label="频率">
      </el-table-column>
      <el-table-column
        align="center"
        prop="online"
        :formatter="onlineFormat"
        label="状态"
      >
      </el-table-column>
      <el-table-column align="center" prop="country" label="国家">
      </el-table-column>
      <el-table-column align="center" prop="agreement" label="协议">
      </el-table-column>
      <el-table-column
        align="center"
        prop="bTime"
        :formatter="bTimeFormat"
        label="绑定时间"
      >
      </el-table-column>
    </el-table>

    <div class="flex jc-c bg-fff pb-10 pt-10">
      <el-pagination
        @current-change="changePage"
        background
        :current-page="currPage"
        :page-size="pageSize" 
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import ContentTitle from "@/components/ContentTitle";
import { $gatewayList } from "../../api";
import moment from "moment";
export default {
  components: {
    ContentTitle,
  },

  data() {
    return {
      loading: false,
      // 分页信息
      total: 0,
      // 每页条数
      pageSize: 5,
      // 当前页
      currPage: 1,
      // 当前网关协议
      agreement: "all",

      // 搜索条件
      form: {
        eui: "",
        // 是否在线
        online: "",
        date: "",
      },

      ctInfo: {
        type: "网关",
        text: "网关列表",
        msg: "展示EUI、名称、状态、数据类型等设备信息，可根据EUI、群组、状态、绑定时间等条件筛选具体的传感器节点，并提供移动群组等功能。",
      },

      tableData: [
        // {
        //   id: "36000020040215452X",
        //   eui: "TN371315570",
        //   name: "智慧农业-网关",
        //   mhz: "CN269-072",
        //   online: false,
        //   country: "China",
        //   agreement: "LoRaPP",
        //   desc: "用于智慧农业的网关设备",
        //   bTime: 1631184197285,
        //   uTime: 1631184197285,
        // },
      ],
    };
  },

  created() {
    this.getList();
  },

  computed: {
    dateStr() {
      let date = this.form.date;
      // 选择了日期的时候才计算
      if (date) {
        let date1 = date[0].getTime();
        let date2 = date[1].getTime();
        return date1 + "-" + date2;
      } else {
        return "";
      }
    },
  },

  methods: {
    // 刷新
    refresh() {
      this.form.eui = "";
      this.form.date = "";
      this.form.online = "";
      this.currPage = 1;
      this.agreement = "all";
      this.getList();
    },

    // 清除
    clear() {
      this.form.eui = "";
      this.form.date = "";
      this.form.online = "";
    },

    // 搜索
    search() {
      this.currPage = 1;
      console.log(this.form.date);
      this.getList();
    },

    // 切换分页
    changePage(page) {
      this.currPage = page;
      // 重新获取列表数据
      this.getList();
    },
    // 切换tab栏(切换网关协议)
    changeTabs(tab) {
      // 协议改为点击的tab
      this.agreement = tab.name;
      // 切换tab的时候, 默认显示第一页数据
      this.currPage = 1;
      this.getList();
    },

    getList() {
      this.loading = true;
      // 请求参数
      let parmas = {
        currPage: this.currPage,
        pageSize: this.pageSize,
        agreement: this.agreement,
        eui: this.form.eui,
        online: this.form.online,
        date: this.dateStr,
      };

      $gatewayList(parmas).then((res) => {
        this.tableData = res.data;
        this.total = res.total;
        this.loading = false;
      });
    },
  },
};
</script>


<style lang="less">
.device-gateway {
  .el-select {
    width: 100%;
  }
  .el-form-item {
    margin-bottom: 5px;
  }
}
</style>